<template>
	<view class="container">
		<!-- 页面顶部标题 -->
		<view class="header">
			<text class="title">匿名举报</text>
		</view>
		<!-- 投诉列表 -->
		<view class="complaint-list">
			<view v-for="(item, index) in complaintList" :key="index" class="complaint-item">
				<view class="complaint-content">
					<text class="complaint-text">举报内容: {{ item.neirong }}</text>
					<text v-if="item.huifu" class="reply-text">管理员回复: {{ item.huifu || '暂无回复' }}</text>
				</view>
			</view>
		</view>
		<!-- 投诉输入框 -->
		<view class="content">
			<textarea v-model="complaint" class="textarea" placeholder="请输入您的举报内容" maxlength="500"></textarea>
		</view>

		<!-- 提交按钮 -->
		<view class="button-container">
			<button :disabled="isButtonDisabled" class="submit-button" @click="submitComplaint">
				提交举报
			</button>
		</view>


	</view>
</template>
<script>
	import {
		addjvbao,
		getjvbao,
	} from "@/request/API/xinwentongzhi/index";

	export default {
		data() {
			return {
				complaint: "", // 投诉内容
				userInfo: {},
				complaintList: [] // 存储投诉列表
			};
		},
		computed: {
			// 计算按钮是否禁用
			isButtonDisabled() {
				return this.complaint.trim() === ""; // 如果投诉内容为空，则禁用按钮
			},
		},
		onLoad(options) {
			// 获取存储的用户信息，并解析为对象
			const user = uni.getStorageSync('user');
			if (user) {
				this.userInfo = user; // 解析存储的用户信息字符串为对象
				console.log(this.userInfo);
			}
			this.fetchComplaints(); // 获取投诉列表
		},
		methods: {
			// 获取投诉列表
			fetchComplaints() {
				getjvbao({
					xingming: this.userInfo.xingming,
				}).then(res => {
					if (res && res.data) {
						this.complaintList = res.data.list; // 更新投诉列表
					}
				}).catch(error => {
					console.error('获取投诉列表失败:', error);
				});
			},

			// 提交投诉
			submitComplaint() {
				if (this.complaint.trim() === "") {
					uni.showToast({
						title: '请输入内容后再提交',
						icon: 'none', // 使用 'none' 类型的 icon 表示简单的提示
					});
					return; // 不执行后续提交操作
				}
				addjvbao({
					// ...this.userInfo,
					neirong: this.complaint,
					yonghuming: this.userInfo.yonghuming,
					cheng: this.userInfo.xingming,
				}).then(res => {
					uni.showToast({
						title: '举报提交成功!',
						icon: 'success',
					});
					// 清空输入框并刷新投诉列表
					this.complaint = "";
					this.fetchComplaints(); // 更新投诉列表
				}).catch(error => {
					console.error('提交举报失败:', error);
					uni.showToast({
						title: '提交失败，请稍后重试',
						icon: 'none',
					});
				});
			},
		},
	};
</script>
<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		background-color: #f7f8fa;
		min-height: 100vh;
	}

	.header {
		width: 100%;
		padding: 20px;
		background-color: #ffffff;
		border-radius: 12px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
		text-align: center;
		margin-bottom: 30px;
	}

	.title {
		font-size: 26px;
		font-weight: bold;
		color: #333;
	}

	.content {
		width: 100%;
	}

	.textarea {
		width: 100%;
		height: 180px;
		padding: 18px;
		border-radius: 10px;
		border: 1px solid #d1d7e3;
		font-size: 16px;
		color: #333;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
		resize: none;
		transition: all 0.3s ease;
	}

	.textarea:focus {
		border-color: #0066cc;
		box-shadow: 0 0 8px rgba(0, 102, 204, 0.3);
	}

	.textarea:disabled {
		background-color: #f5f5f5;
	}

	.button-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.submit-button {
		background: linear-gradient(135deg, #0066cc, #00aaff);
		color: white;
		font-size: 18px;
		padding: 14px 36px;
		border-radius: 30px;
		border: none;
		width: 80%;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
		transition: background-color 0.3s ease, transform 0.2s ease;
		cursor: pointer;
	}

	.submit-button:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.submit-button:hover {
		background-color: #005bb5;
		transform: scale(1.05);
	}

	.submit-button:active {
		background-color: #00488f;
		transform: scale(0.98);
	}

	/* 投诉列表样式 */
	.complaint-list {
		width: 100%;
		margin-top: 30px;
	}

	.complaint-item {
		background-color: #fff;
		padding: 16px;
		margin-bottom: 20px;
		border-radius: 12px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
	}

	.complaint-content {
		display: flex;
		flex-direction: column;
		font-size: 16px;
		color: #333;
	}

	.complaint-text {
		margin-bottom: 8px;
		font-weight: bold;
	}

	.reply-text {
		font-style: italic;
		color: #888;
	}

	/* 响应式布局 */
	@media (max-width: 768px) {
		.textarea {
			height: 150px;
		}

		.submit-button {
			width: 90%;
		}
	}
</style>